<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <!-- 头部 -->
    <van-nav-bar
        title="黑名单"
        :left-text="isEdit?'完成':'编辑'"
        @click-left="isEdit = !isEdit"
        />
        <div class="main">
            <menu-item v-for="(item,index) in list" :key="index" :item="item" :index="index" :isEdit="isEdit"></menu-item>
        </div>
        <!-- 数组用于动态绑定多个类名 -->
        <div :class="['btn',isEdit?'red':'']" @click="submit">{{isEdit?'删除':'添加'}}</div>

  </div>
</template>

<script>
// @ is an alias to /src
import menuItem from '@/components/menuItem.vue'
import {ref,reactive,toRefs,computed} from 'vue'
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'

export default {
//   name: 'HomeView',
setup(props) {
    const {state,commit} =useStore()
    const {push} = useRouter()
    const data = reactive({
        isEdit:false, //false编辑
    })
    const list = computed(()=>state.list)
    // 点击按钮事件
    const submit = ()=>{
        if(data.isEdit){
            // 删除
            commit('selectDel')


        }else{
            // 添加  跳转到添加页面
            push('/about')

        }
    }
    return {...toRefs(data),submit,list}
    
},
  components: {
    menuItem
  }
}
</script>
<style lang="scss" scoped>
.btn{
    width:60px;
    height: 60px;
    border-radius: 50%;
    line-height: 60px;
    text-align: center;
    background: skyblue;
    color: #fff;
    position: fixed;
    right:30px;
    bottom:50px;
    &.red{
        background: #c00;
    }
}
</style>

